<template>
	<view class="swiperBox">
		<swiper class="swiper" circular>
			<swiper-item v-if="swiperCur == 0" v-for="(item, index) in data.goods_image">
				<divimg class="img" :src="item" mode="aspectFill"></divimg>
			</swiper-item>
			<swiper-item v-if="swiperCur == 1" v-for="(item, index) in data.video">
				<video class="img" :src="item"></video>
			</swiper-item>
		</swiper>
		<view class="btnbox flex">
			<view class="btn imgbtn" @click="swiperCur=0" :class="swiperCur == 0 ? 'btnCur' : ''">图片</view>
			<view class="btn" @click="swiperCur=1" :class="swiperCur == 1 ? 'btnCur' : ''">视频</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'swiperBox',
		props: {
			data: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {
				swiperCur: 0,
			};
		},
		methods:{
			
		}
	};
</script>

<style lang="scss" scoped>
	.swiperBox {
		position: relative;
		width: 100%;
		height: 421rpx;
		.swiper {
			width: 100%;
			height: 421rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.btnbox {
			width: 100%;
			justify-content: center;
			position: absolute;
			top: 360rpx;
			left: 0;
			.imgbtn {
				margin-right: 20rpx;
			}
			.btn {
				width: 80rpx;
				height: 40rpx;
				background: #ffffff;
				border-radius: 20rpx;
				color: #999999;
				font-size: $uni-font-size-10;
				line-height: 40rpx;
				text-align: center;
			}
			.btnCur {
				background: #1fc28b;
				color: #ffffff;
			}
		}
	}
</style>
